<template>
	<view class="bgc">
		<!-- 三个透明圆 -->
		<view class="circular1"></view>
		<view class="circular2"></view>
		<view class="circular3"></view>
		<view class="navigation" style="height: 44px;background-color: #fff;"></view>
		<!-- 头部 -->
		<view class="headerBg">
			<view class="header">
				<view class="headerLeft">
					<view class="model" style="position: relative;">
						<view class="modal_tit" style="position: absolute;z-index:999;left: -20rpx;top: -20rpx;">
							<image v-if="(roleAuthority == 'StoreManager' || roleAuthority == 'StoreDuty' ) && userinfo.model== '热血金牌'" src="/static/imgs/mode/gold.png" class="modeImg" mode=""></image>
							<image v-if="(roleAuthority == 'StoreManager' || roleAuthority == 'StoreDuty' ) && userinfo.model== '热血银牌'" src="/static/imgs/mode/silver.png" class="modeImg" mode=""></image>
						</view>
					</view>
					<image src="/static/imgs/workbenches/header.png" class="img" mode=""></image>
				</view>
				<view class="headerCenter">
					<view class="headerCenterTop">
						<text>{{tp}}，</text>
						<text>{{name}}!</text>
						<view class="role">
							<view class="roleBg">
								<image src="/static/imgs/workbenches/goldCoin.png" mode="" class="roleImg" v-if="roleAuthority == 'partner'"></image>
								<image src="/static/imgs/workbenches/planner.png" mode="" class="roleImg" v-else-if="roleAuthority == 'StoreStaff'"></image>
								<image src="/static/imgs/workbenches/StoreManager.png" mode="" class="roleImg" v-else-if="roleAuthority == 'StoreManager'"></image>
								<image src="/static/imgs/workbenches/StoreDuty.png" mode="" class="roleImg" v-else></image>
								<text style="margin-left: 10rpx;">{{roleName}}</text>
							</view>
						</view>
					</view>
					<view class="headerCenterBottom" @tap="changeStore()">
						<text>{{businessName}}</text>
						<image src="/static/imgs/workbenches/changeStore.png" mode="" class="roleImg" v-if="!(roleAuthority == 'StoreManager' || roleAuthority == 'StoreStaff' || roleAuthority == 'partner')"></image>
					</view>
				</view>
				<view class="headerBottom">
					<!-- <image src="/static/imgs/workbenches/tongzhi.png" mode="" class="notice"></image> -->
					<!-- 设置 -->
				</view>
			</view>
			
		</view>
		
		<!-- 业绩 -->
		<!-- 生涯规划师 -->
		<view v-if="roleAuthority == 'StoreStaff'">
			<view class="performanceBox planner">
				<view class="order"style="text-align: center;" v-if="isHaveData">
					<view class="num">{{quantity}}</view>
					<view class="synopsis">本月成交单数</view>
				</view>
				<view class="performance" style="text-align: center;" v-if="isHaveData">
					<view class="num">{{achievement}}</view>
					<view class="synopsis">本月业绩金额</view>
				</view>
				<!-- <view class="profit">
					<view class="num">6000</view>
					<view class="synopsis">本月分润金额</view>
				</view> -->
				<view style="font-size: 30rpx;" v-if="!isHaveData">
					您暂未设置预算区间，无法显示数据
				</view>
			</view>
		</view>
		
		<!-- 合伙人 -->
		<view v-else-if="roleAuthority == 'partner'">
			<view class="performanceBox planner">
				<view class="order" style="text-align: center;" v-if="isHaveData">
					<view class="num">{{quantity}}</view>
					<view class="synopsis">本月成交单数</view>
				</view>
				<view class="performance" style="text-align: center;" v-if="isHaveData">
					<view class="num">{{achievement}}</view>
					<view class="synopsis">本月业绩金额</view>
				</view>
				<view class="profit" style="text-align: center;" v-if="isHaveData">
					<view class="num">{{profit}}</view>
					<view class="synopsis">本月分润金额</view>
				</view>
				<view style="font-size: 30rpx;" v-if="!isHaveData">
					您暂未设置预算区间，无法显示数据
				</view>
			</view>
		</view>
		
		<!-- 负责人 -->
		<view v-else-if="roleAuthority == 'StoreDuty'">
			<view class="performanceBox planner">
				<view class="order" style="text-align: center;" v-if="isHaveData">
					<view class="num">{{quantity}}</view>
					<view class="synopsis">年度成交单数</view>
				</view>
				<view class="performance" style="text-align: center;" v-if="isHaveData">
					<view class="num">{{achievement}}</view>
					<view class="synopsis">年度业绩金额</view>
				</view>
				<view class="profit" style="text-align: center;" v-if="isHaveData">
					<view class="num">{{profit}}</view>
					<view class="synopsis">年度分润金额</view>
				</view>
				<view style="font-size: 30rpx;" v-if="!isHaveData">
					您暂未设置预算区间，无法显示数据
				</view>
			</view>
		</view>
		
		<!-- 店长和其余 -->
		<view v-else>
			<view class="performanceBox planner" >
				<view class="order" style="text-align: center;" v-if="isHaveData">
					<view class="num">{{quantity}}</view>
					<view class="synopsis">年度成交单数</view>
				</view>
				<view class="performance" style="text-align: center;" v-if="isHaveData">
					<view class="num">{{achievement}}</view>
					<view class="synopsis">年度业绩金额</view>
				</view>
				<view class="profit" style="text-align: center;" v-if="isHaveData">
					<view class="num">{{profit}}</view>
					<view class="synopsis">年度分润金额</view>
				</view>
				<view style="font-size: 30rpx;" v-if="!isHaveData">
					您暂未设置预算区间，无法显示数据
				</view>
			</view>
			
		</view>
		
		<!-- 菜单列表 -->
		<view class="menuBar">
			<view class="menuBarTop">
				<view class="menuItem" v-if="roleAuthority== 'SuperManager' || roleAuthority== 'CEO'|| roleAuthority== 'Master' || roleAuthority== 'StoreDuty' || roleAuthority== 'StoreManager'">
					<view class="menuItemOne" @tap="goToPages('线索管理')">
						<view class="icon">
							<image src="/static/imgs/workbenches/clueManage.png" mode="" class="iconImg"></image>
						</view>
						<view class="name">线索管理</view>
					</view>
				</view>
				<view class="menuItem"  v-if="roleAuthority== 'SuperManager' || roleAuthority== 'CEO'|| roleAuthority== 'Master' || roleAuthority== 'StoreDuty' || roleAuthority== 'StoreManager' || roleAuthority== 'StoreStaff'">
					<view class="menuItemOne" @tap="goToPages('我的线索')">
						<view class="icon">
							<image src="/static/imgs/workbenches/myClue.png" mode="" class="iconImg"></image>
						</view>
						<view class="name">我的线索</view>
					</view>
				</view>
				<view class="menuItem" v-if="roleAuthority== 'SuperManager' || roleAuthority== 'CEO'|| roleAuthority== 'Master' || roleAuthority== 'StoreDuty' || roleAuthority== 'StoreManager' || roleAuthority== 'StoreStaff' || roleAuthority== 'partner' ">
					<view class="menuItemOne" @tap="goToPages('我的客户')">
						<view class="icon">
							<image src="/static/imgs/workbenches/customer.png" mode="" class="iconImg"></image>
						</view>
						<view class="name">我的客户</view>
					</view>
				</view>
				<view class="menuItem"  v-if="roleAuthority== 'SuperManager' || roleAuthority== 'CEO'|| roleAuthority== 'Master' || roleAuthority== 'StoreDuty' || roleAuthority== 'StoreManager' || roleAuthority== 'StoreStaff'">
					<view class="menuItemOne" @tap="goToPages('公海')">
						<view class="icon">
							<image src="/static/imgs/workbenches/highSeas.png" mode="" class="iconImg"></image>
						</view>
						<view class="name">公海</view>
					</view>
				</view>
				<view class="menuItem" v-if="roleAuthority== 'SuperManager' || roleAuthority== 'CEO'|| roleAuthority== 'Master' || roleAuthority== 'StoreDuty' || roleAuthority== 'StoreManager'">
					<view class="menuItemOne" @tap="goToPages('业绩分配')">
						<view class="icon">
							<image src="/static/imgs/workbenches/performance.png" mode="" class="iconImg"></image>
						</view>
						<view class="name">业绩分配</view>
					</view>
				</view>
				<view class="menuItem" v-if="roleAuthority== 'SuperManager' || roleAuthority== 'CEO'|| roleAuthority== 'Master' || roleAuthority== 'StoreManager' || roleAuthority== 'StoreStaff' || roleAuthority== 'partner' ">
					<view class="menuItemOne" @tap="goToPages('我的订单')">
						<view class="icon">
							<image src="/static/imgs/workbenches/myOrders.png" mode="" class="iconImg"></image>
						</view>
						<view class="name">我的订单</view>
					</view>
				</view>
				<view class="menuItem"  v-if="roleAuthority== 'SuperManager' || roleAuthority== 'CEO'|| roleAuthority== 'Master' || roleAuthority== 'StoreDuty' || roleAuthority== 'StoreManager'" >
					<view class="menuItemOne" @tap="goToPages('产品管理')">
						<view class="icon">
							<image src="/static/imgs/workbenches/product.png" mode="" class="iconImg"></image>
						</view>
						<view class="name">产品管理</view>
					</view>
				</view>
				<!-- <view class="menuItem"   v-if="roleAuthority== 'SuperManager' || roleAuthority== 'CEO'|| roleAuthority== 'Master' || roleAuthority== 'StoreDuty' || roleAuthority== 'StoreManager'|| roleAuthority== 'MasterAssistant'" >
					<view class="menuItemOne" @tap="goToPages('门店管理')">
						<view class="icon">
							<image src="/static/imgs/workbenches/store.png" mode="" class="iconImg"></image>
						</view>
						<view class="name">门店管理</view>
					</view>
				</view> -->
			</view>
		</view>
		
		<!-- 轮播图 -->
		<view class="uni-margin-wrap">
			<swiper class="swiper" circular :indicator-dots="false" :autoplay="true" :interval="2000"
				:duration="500">
				<swiper-item>
					<view class="swiper-item uni-bg-red"></view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item uni-bg-green"></view>
				</swiper-item>
			</swiper>
		</view>
		
		<!-- 切换门店 -->
		<up-popup :show="show" mode="bottom" :safeAreaInsetBottom="true" :customStyle="{'height':'500rpx','width':'100%'}" @close="show = false,uni.showTabBar()" zIndex="999">
			<view style="text-align: center;margin:20rpx;">
				切换门店
			</view>
			<scroll-view scroll-y enable-flex style="height: 300rpx;max-height: 300rpx;overflow: auto;">
				<view v-for="item in businessList" :key="item.businessId" class="businessListItem" @click="chooseItem(item.businessId)" :style="{'backgroundColor':bgc(item.businessId)}">
					<view style="width: 100%;text-align: center;">
						<text style="opacity: .85;">{{item.businessName}}</text>
					</view>
				</view>
			</scroll-view>
			<view style="height: 100rpx;line-height: 100rpx;margin-top: 10rpx;">
				<up-button text="确认切换" color="linear-gradient(to right, rgb(147,210,243), rgb(64,149,229))" @tap="changeStoreSubmit"></up-button>
			</view>
		</up-popup>
		
	</view>
</template>

<script setup>
	import { nextTick, onMounted, ref } from 'vue';
	import { getUserInfoHandle,homeGetBusinessList,profitHomeProfitSta,phoneStaGetStoreDutySta,phoneStaGetStoreManSta } from '../../utils/user'
	import { onShow } from '@dcloudio/uni-app'; 
	
	let show = ref(false)
	// 切换门店
	let changeStore = ()=>{
		uni.hideTabBar()
		show.value = true
	}
	
	// 选择某一个门店
	let chooseItem = (val)=>{
		businessId.value = val
	}
	
	// 改变被选择门店的背景颜色
	let bgc = (val) =>{
		if(businessId.value == val){
			return 'rgba(147,210,243,.5)'
		}else{
			return ''
		}
	}
	
	// 确认切换门店
	let changeStoreSubmit = ()=>{
		show.value = false
		uni.showTabBar()
		businessName.value = businessList.value.filter(item=>item.businessId ==businessId.value)[0].businessName
		uni.setStorageSync('businessId',businessId.value)
		isHaveData.value = false
		homeProfitSta()
	}
	
	// 点击菜单
	let goToPages = (val) =>{
		if(val == '线索管理'){
			uni.navigateTo({
				 url: '/pages/clueManage/clueManage'
			})
		}else if (val == '业绩分配'){
			uni.navigateTo({
				 url: '/pages/Achievement/Achievement'
			})
		}else if (val == '我的线索'){
			uni.navigateTo({
				 url: '/pages/myClue/myClue'
			})
		}else if (val == '我的客户'){
			uni.navigateTo({
				 url: '/pages/myCustomer/myCustomer'
			})
		}else if (val == '我的订单'){
			uni.navigateTo({
				 url: '/pages/MyOrder/MyOrder'
			})
		}else if (val == '产品管理'){
			uni.navigateTo({
				 url: '/pages/product/product'
			})
		}else if (val == '公海'){
			uni.navigateTo({
				 url: '/pages/publicOcean/publicOcean'
			})
		}

	}
	
	// 早中下晚
	let tp = ref('')
	// 门店名称
	let name = ref('')
	// 角色
	let roleName = ref('')
	let roleAuthority = ref('')
	
	// 获取时间
	let GetDate = ()=>{
		const now = new Date();
		var hours = now.getHours().toString().padStart(2, '0');
		const startTime = 6; // 早上开始时间（小时）
		const noonTime = 12; // 下午开始时间（小时）
		const endTime = 18; // 晚上开始时间（小时）
		// 判断当前时间所属时间段，并输出相应的问候语
		// 早上6-12
		if (hours >= startTime && hours < noonTime) {
			tp.value = '早上好';
		//下午12-18
		} else if (hours >= noonTime && hours < endTime) {
			tp.value = '下午好';
		//晚上
		} else {
			tp.value = '晚上好';
		} 
	}
	
	
	// 个人信息
	let userinfo = ref()
	
	// 获取个人信息
	const initUserData = async ()=>{
	   try { 
		const token = uni.getStorageSync('token')
		const res  = await getUserInfoHandle({token:token})
		if(res.code == 200){
			userinfo.value = res.data
			uni.setStorageSync('userinfo',JSON.stringify(res.data))
			uni.setStorageSync('roleAuthority',JSON.stringify(res.data.roleAuthority))
			name.value = res.data.name
			roleName.value = res.data.roleName
			roleAuthority.value = res.data.roleAuthority
		}
		getBusinessList()
	   }catch(e){
		 console.log(e)
	   } 
	}
	
	// 门店列表
	let businessList = ref([])
	// 门店ID
	let businessId = ref()
	// 门店名称
	let businessName = ref('')
	
	// 获取门店列表
	let getBusinessList = ()=>{
		homeGetBusinessList().then(res=>{
			businessName.value = ''
			if(res.code == 200){
				businessList.value = res.data
				if(uni.getStorageSync('businessId')){
					businessId.value = uni.getStorageSync('businessId')
					businessName.value = res.data.filter(item=>item.businessId == businessId.value)[0].businessName
				}else{
					
					if(userinfo.value.businessId == 0){
						businessId.value = res.data[0].businessId
					}else{
						businessId.value = userinfo.value.businessId
					}
					uni.setStorageSync('businessId',businessId.value)
					businessName.value = res.data[0].businessName
					
				}
				nextTick(()=>{
					homeProfitSta()
				})
			}
		})
	}
	
	// 业绩、利润、数量
	let achievement = ref(0)
	let profit = ref(0)
	let quantity = ref(0)
	
	// 是否有数据
	let isHaveData = ref(false)
	
	// 获取统计信息
	let homeProfitSta = ()=>{
		isHaveData.value = false
		achievement.value = 0
		profit.value = 0
		quantity.value = 0
		if(roleAuthority.value == 'StoreStaff' || roleAuthority.value == 'partner'){
			profitHomeProfitSta({
				businessId:businessId.value
			}).then(res=>{
				if(res.code == 200){
					if(res.data.achievement){
						if(Number.isInteger(res.data.achievement)){
							achievement.value = res.data.achievement
						}else{
							achievement.value = res.data.achievement.toFixed(1)
						}
					}
					if(res.data.profit){
						if(Number.isInteger()){
							profit.value = res.data.profit
						}else{
							profit.value = res.data.profit.toFixed(1)
						}
					}
					quantity.value = res.data.quantity
					isHaveData.value = true
				}
			})
		}else if(roleAuthority.value == 'StoreDuty'){
			phoneStaGetStoreDutySta().then(res=>{
				if(res.code == 200){
					if(res.data.achievement){
						if(Number.isInteger(res.data.achievement)){
							achievement.value = res.data.achievement
						}else{
							achievement.value = res.data.achievement.toFixed(1)
						}
					}
					if(res.data.profit){
						if(Number.isInteger()){
							profit.value = res.data.profit
						}else{
							profit.value = res.data.profit.toFixed(1)
						}
					}
					quantity.value = res.data.quantity
					isHaveData.value = true
				}
			})
		}else{
			phoneStaGetStoreManSta({
				businessId:businessId.value
			}).then(res=>{
				if(res.code == 200){
					if(res.data.achievement){
						if(Number.isInteger(res.data.achievement)){
							achievement.value = res.data.achievement
						}else{
							achievement.value = res.data.achievement.toFixed(1)
						}
					}
					if(res.data.profit){
						if(Number.isInteger()){
							profit.value = res.data.profit
						}else{
							profit.value = res.data.profit.toFixed(1)
						}
					}
					quantity.value = res.data.quantity
					isHaveData.value = true
				}
			})
		}
		
	}
	
	onShow(()=>{
		initUserData()
		GetDate()
	})
	
	
</script>

<style lang="scss" scoped>
	
	// ============整个背景============ //
	.bgc{
		width: 100vw;
		// height: calc(100vh - 100rpx);
		background-color: rgba(247,248,250,1);
	}
	
	// ============三个透明圆============ //
	.circular1{
		position: absolute;
		left: -114rpx;
		top: -64rpx;
		width: 330rpx;
		height: 330rpx;
		line-height: 40rpx;
		background-color: rgba(255,255,255,0.2);
		color: rgba(16,16,16,1);
		font-size: 28rpx;
		text-align: center;
		font-family: -regular;
		border-radius: 50%;
	}
		
	.circular2{
		position: absolute;
		left: 32rpx;
		top: -322rpx;
		width: 410rpx;
		height: 410rpx;
		line-height: 40rpx;
		background-color: rgba(255,255,255,0.2);
		color: rgba(16,16,16,1);
		font-size: 28rpx;
		text-align: center;
		font-family: -regular;
		border-radius:50%;
	}
		
	.circular3{
		position: absolute;
		left: 574rpx;
		top: 80rpx;
		width: 175rpx;
		height: 330rpx;
		line-height: 40rpx;
		background-color: rgba(255,255,255,0.35);
		color: rgba(16,16,16,1);
		font-size: 28rpx;
		text-align: center;
		font-family: -regular;
		border-radius: 50% 0 0 50%;
		}

		
	
	// ============整个头部背景============ //
	.headerBg{
		left: 0rpx;
		top: -110rpx;
		width: 750rpx;
		height: 352rpx;
		border-bottom-left-radius: 66rpx;
		border-bottom-right-radius: 66rpx;
		background: linear-gradient(139.59deg, rgba(147,210,243,1) 22.85%,rgba(64,149,229,1) 61.57%);
		color: rgba(16,16,16,1);
		font-size: 28rpx;
		text-align: center;
		font-family: -regular;
	}
	
	.header{
		position: relative;
		top: 40%;
		transform: translateY(-50%);
		width: 100%;
		height:50%;
		display:flex;
		justify-content: space-around;
		align-items:center;
		z-index: 9;
	}
		
	// 头像
	.headerLeft{
		width: 132rpx;
		height: 132rpx;
		margin-left: 20rpx;
		border-radius: 78rpx;
	}

	.img{
		position: relative;
		width: 132rpx;
		height: 132rpx;
		border-radius: 78rpx;
		z-index: 9;
	}
	
	.modeImg{
		width: 70rpx;
		height: 58rpx;
		z-index: 999;
		transform: scaleX(-1);
	}

	// 姓名与合作类型
	.headerCenter{
		width: 500rpx;
		text-align: left;
	}

	.headerCenterTop{
		font-size: 30rpx;
		height: 80rpx;
		display:flex;
		align-items:center
	}

	.headerCenterBottom{
		font-size: 28rpx;
		color: rgba(108,108,108,1);
		display: flex;
		align-items: center;
	}
	
	// 角色
	.role{
		margin-left: 20rpx;
		color: rgba(252,202,0,1);
		font-size: 24rpx;
	}
	
	.roleBg{
		background-color:rgba(252, 202, 0, .4);
		border-radius: 40rpx;
		width: 200rpx;
		text-align: center;
		height: 50rpx;
		line-height: 50rpx;
		display: flex;
		align-items: center;
	}
	
	.roleImg{
		width:30rpx;
		height: 30rpx;
		margin-left: 16rpx;
	}

	// 通知图标
	.notice{
		position: relative;
		width: 48rpx;
		height: 48rpx;
		vertical:middle;
		z-index: 9;
	}

	// ============整个业绩背景 ============ //
	.performanceBox{
		position: relative;
		left: 50%;
		transform: translateX(-50%);
		top: -4.6em;
		width: 700rpx;
		height: 214rpx;
		line-height: 40rpx;
		border-radius: 20rpx;
		background-color: rgba(255,255,255,1);
		color: rgba(16,16,16,1);
		font-size: 14px;
		text-align: center;
		font-family: -regular;
		z-index:9;
		display:flex;
		justify-content: space-around;
		align-items:center;
	}

	.order{
		width:25%;
		text-align: center;
	}

	.performance{
		width:35%;
		text-align: center;
	}

	.profit{
		width:35%;
		text-align: center;
	}

	.num{
		height: 84rpx;
		line-height: 84rpx;
		color: rgba(252,202,0,1);
		font-size: 46rpx;
		font-family: PingFangSC-bold;
		font-weight: 800;
	}

	.synopsis{
		height: 34rpx;
		line-height: 34rpx;
		color: rgba(154,154,154,1);
		font-size: 24rpx;
		font-family: PingFangSC-regular;
	}

	// ============整个菜单栏背景 ============ //
	.menuBar{
		position: relative;
		left: 50%;
		transform: translateX(-50%);
		top: -3.8em;
		width: 700rpx;
		height: 326rpx;
		line-height: 40rpx;
		border-radius: 12rpx;
		background-color: rgba(255,255,255,1);
		color: rgba(16,16,16,1);
		font-size: 28rpx;
		font-family: -regular;
	}
	
	.menuBarTop{
		width: 100%;
		height: 100%;
	}
	
	.menuItem{
		width: 25%;
		height: 50%;
		display: inline-block;
		position: relative;
	}
	
	.menuItemOne{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
	}
	
	.icon{
		width: 58rpx;
		height: 58rpx;
		margin: auto;
	}
	
	.iconImg{
		max-width:100%;
		max-height: 100%;
	}
	
	.name{
		width: 96rpx;
		height: 34rpx;
		line-height: 34rpx;
		color: rgba(79,79,79,1);
		font-size: 24rpx;
		margin: auto;
		padding-top: 6rpx;
		font-family: PingFangSC-regular;
		text-align: center;
	}

	// ============轮播图 ============ //
	.uni-margin-wrap {
		width: 690rpx;
		width: 100%;
		position: relative;
		top: -2.4em;
	}
	.swiper {
		height: 300rpx;
	}
	.swiper-item {
		display: block;
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
	}
	
	.uni-bg-red{
		background: url(/static/imgs/workbenches/swiper1.png);
		background-size: contain;
		background-repeat: no-repeat;
	}
	.uni-bg-green{
		background: url(/static/imgs/workbenches/swiper2.png);
		background-size: contain;
		background-repeat: no-repeat;
	}
	
	// ============切换门店 ============ //
	.businessListItem{
		margin:0 30rpx;
		border-bottom: 1rpx solid rgba(127,127,127,.2);
		height: 70rpx;line-height: 70rpx;
	}
	
</style>
